<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-checkbox-group v-model="selected">
      <!-- v-model="areaListData.province" -->
      <el-checkbox v-for="province in areaListData.province" :key="province.code" :value="province.name"
        :label="province.name" />
    </el-checkbox-group>
    <template #footer>
      <el-button @click="onSelectProvince" type="primary">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { areaListData } from '@/utils/location';

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题

const open = (provinces) => {
  dialogVisible.value = true
  dialogTitle.value = "省份选择"
  selected.value = provinces;
}
const selected = ref([]);

const emit = defineEmits(['onSelect'])
const onSelectProvince = async () => {
  emit('onSelect', selected.value);
  dialogVisible.value = false;
  selected.value = [];
}

defineExpose({ open })
</script>